import NumRow from "./NumRow";
import ScrollView from "./ScrollView";
import ButtonList from "./ButtonList";
import {
  SearchOutlined,
  FileAddFilled,
  ForkOutlined,
  GlobalOutlined,
  MessageFilled,
  MoneyCollectFilled,
  NotificationFilled,
} from "@ant-design/icons";
import "./index.css";

const itemStyle = {
  padding: "4px 10px",
  fontSize: 13,
};

const TWO_VIEW_HEIGHT = "calc((85vh - 220px) / 2)";
const THREE_VIEW_HEIGHT = "calc((85vh - 260px) / 3)";

const DeviceAlarm = () => {
  const firstList = [
    { icon: "/icon/bar.png", label: "文字1", num: 3043 },
    { icon: "/icon/person.png", label: "文字2", num: 2765 },
    { icon: "/icon/phone.png", label: "文字3", num: 9 },
    { icon: "/icon/mengmian.png", label: "文字4", num: 13 },
  ];
  const secondList = [
    { icon: "/icon/card.png", label: "文字1", num: 10 },
    { icon: "/icon/handle.png", label: "文字2", num: 20 },
    { icon: "/icon/out.png", label: "文字3", num: 30 },
    { icon: "/icon/ouda.png", label: "文字4", num: 40 },
  ];
  const thirdList = [
    { icon: "/icon/person.png", label: "文字4", num: 550 },
    { icon: "/icon/bar.png", label: "文字3", num: 660 },
  ];

  const btn1List = [
    { icon: <SearchOutlined />, name: "链接1" },
    { icon: <FileAddFilled />, name: "链接2" },
  ];
  const btn2List = [
    { icon: <ForkOutlined />, name: "链接1" },
    { icon: <GlobalOutlined />, name: "链接2" },
    { icon: <MessageFilled />, name: "链接3" },
  ];
  const btn3List = [
    { icon: <MoneyCollectFilled />, name: "链接1" },
    { icon: <NotificationFilled />, name: "链接2" },
  ];
  // const imgList = [
  //   { left: "10px", rotate: "180deg", top: "3%" },
  //   { left: "25px", rotate: "180deg", top: "3%" },
  //   { right: "10px" },
  //   { right: "25px" },
  // ];

  return (
    <div
      style={{
        background: "#070848",
        height: "100vh",
        boxSizing: "border-box",
      }}
    >
      <h1
        className="tac"
        style={{
          fontSize: "1.67vw",
          color: "#ddd",
          marginBottom: '1.65vh',
          letterSpacing: 9,
          fontWeight: "bold",
          position: "relative",
          background: "url(top.png) center center no-repeat",
          backgroundSize: "cover",
          height: "9.5vh",
          lineHeight: "6.6vh",
        }}
      >
        龙湾XXXX研判
      </h1>
      <div
        style={{
          padding: "0 1.2vw",
          display: "grid",
          gap: "1.3vw",
          gridTemplateColumns: "23vw auto 23vw",
          height: "86vh",
          marginTop: '1.5vh'
        }}
      >
        <div className="common small-area" style={{}}>
          <NumRow list={firstList} />
          <ScrollView
            auto
            style={{ height: TWO_VIEW_HEIGHT, marginBottom: 20 }}
          />
          <ScrollView auto style={{ height: TWO_VIEW_HEIGHT }} />
          <ButtonList list={btn1List} />
        </div>
        <div
          className="common"
          style={{ padding: "0 1.57vw" }}
        >
          <NumRow list={secondList} />
          <ScrollView
            indexVisible
            style={{ height: THREE_VIEW_HEIGHT, marginBottom: 13 }}
            itemStyle={itemStyle}
          />
          <ScrollView
            indexVisible
            style={{ height: THREE_VIEW_HEIGHT, marginBottom: 13 }}
            itemStyle={itemStyle}
          />
          <ScrollView
            indexVisible
            style={{ height: THREE_VIEW_HEIGHT }}
            itemStyle={itemStyle}
          />
          <ButtonList list={btn2List} grid={4} />
        </div>
        <div className="common small-area" style={{}}>
          <NumRow list={thirdList} />
          <ScrollView
            auto
            style={{ height: TWO_VIEW_HEIGHT, marginBottom: 20 }}
          />
          <ScrollView auto style={{ height: TWO_VIEW_HEIGHT }} />
          <ButtonList list={btn3List} />
        </div>
      </div>
    </div>
  );
};

export default DeviceAlarm;
